<template>
  <div style="display: flex;justify-content: space-between;">
    <div id="mapChart2"></div>
    <!-- <div style="display: flex;flex-direction: column;width: 320px;">
      <h1 style="text-align: center;">市内综合排名</h1>
      <div v-for=" (item, index) in chunList" :key="index" class="item">
        <h3 :style="{ color: index < 3 ? 'red' : 'black' }">TOP{{ index + 1 }}</h3>
        <span>{{ item.name }}</span>
        <span>{{ item.num }}</span>
      </div>
    </div> -->
  </div>
</template>
<script>
// import echarts from 'echarts'
import * as echarts from "echarts"; //echarts 官网引入方法
import pingtan from "../../assets/pingtan.json";
import fuzhou from "../../assets/fuzhou.json";

var piePatternSrc =
  "";
var piePatternImg = new Image();
piePatternImg.src = piePatternSrc;
var patternSrc =
  "";
var patternImg = new Image();
patternImg.src = patternSrc;
// Vue.prototype.$echarts = echarts
require("echarts"); // echarts theme
export default {
  name: "mapEchart",
  data() {
    return {
      chart: null,
      options: {},
      listArr: [], //城市json
      max: "", //最大value值
      min: "", // 最小value值
      type: 0,
      chunList: [
        {
          name: "鼓楼",
          num: 3480
        },
        {
          name: "台江",
          num: 3473
        },
        {
          name: "长乐",
          num: 3440
        },
        {
          name: "平潭",
          num: 3434
        },
        {
          name: "福清",
          num: 3420
        },
        {
          name: "仓山",
          num: 3413
        }
      ]
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    setTimeout(() => {
      this.initOptions();
      this.initCharts();
    }, 1000);
  },
  methods: {
    initOptions() {
      this.options = {
        visualMap: {
          min: 5555,
          max: 3333333,
          show: false,
          inRange: {
            color: ["lightskyblue", "yellow", "orangered"]
          }
        },
        title: {
          text: "平潭综合实验区"
          // text: "福州市地图"
        },
        //提示框组件
        tooltip: {
          show: true,
          //触发类型：数据项图形触发
          trigger: "item",
          padding: 10,
          borderWidth: 1,
          borderColor: "#409eff",
          backgroundColor: "rgba(255,255,255,0.9)",
          textStyle: {
            color: "#000000",
            fontSize: 12
          },
          //提示框内容格式器
          formatter: e => {
            //字符串模板
            let data = {
              name: "行政执法",
              number: 350,
              five: 102,
              four: 100,
              three: 50
            };
            let context = `
               <div>
                   <p style="line-height: 30px; font-weight: 600">${data.name}</p>
                   <p><span>案件总数情况 : </span><span>${data.number}件</span></p>
                   <p><span>立案数 : </span><span>${data.five}件</span></p>
                   <p><span>结案数 : </span><span>${data.four}件</span></p>
                   <p><span>罚没金额 : </span><span>${data.three}万元</span></p>
               </div>
            `;
            return context;
          }
        },
        series: [
          {
            type: "map",
            map: "pingtan",
            itemStyle: {
              normal: { label: { show: true } },
              emphasis: { label: { show: true } },
              emphasis: {
                areaColor: "#67C23A" //鼠标进入时的颜色
              }
            },
            // itemStyle: {

            //   color: {

            //     image: piePatternImg,

            //     repeat: 'repeat'

            //   },

            //   areaColor: {
            //     image: piePatternImg,
            //     repeat: 'repeat'
            //   },
            //   borderColor: '#bddee6',
            //   borderWidth: 1,
            // },
            //设置选中高亮样式
            select: {
              label: {
                show: false,
                color: "#fff"
              },
              itemStyle: {
                areaColor: {
                  image: patternImg,
                  repeat: "repeat"
                }
              }
            },
            data: this.listArr
          }
        ]
      };
      // this.options = {
      //   backgroundColor: "rgba(0,0,0,0)",
      //   series: {
      //     type: 'map',
      //     show: true,
      //     map: "福州",
      //     left: "0%",
      //     roam: true,
      //     shading: 'realistic',
      //     realisticMaterial: {
      //       roughness: 1,
      //       textureTiling: 1,
      //       // detailTexture: mapTexture
      //     },
      //     regionHeight: 10,
      //     label: {
      //       show: true,
      //       distance: 0,
      //       borderRadius: 0,
      //       color: "#fff",
      //       fontSize: '16px'
      //     },
      //     itemStyle: {
      //       // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
      //       color: "rgba(255,255,255, 0.2)", // 地图板块的颜色
      //       //opacity: 2, // 图形的不透明度 [ default: 1 ]
      //       borderWidth: 2.5, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
      //       borderColor: "rgb(141, 228, 238)", // 图形描边的颜色。[ default: #333 ]
      //     },
      //     emphasis: {
      //       label: {
      //         show: true,
      //         color: "#fff",
      //       },
      //       itemStyle: {
      //         color: "rgb(77, 138, 164)",
      //         opacity: 0.5,
      //       },
      //     },
      //     light: {
      //       // 光照阴影
      //       main: {
      //         color: "#FFFFFF", // 光照颜色
      //         intensity: 2.5, // 光照强度
      //         shadowQuality: "light", // 阴影亮度
      //         shadow: false, // 是否显示阴影
      //         alpha: 70,
      //         beta: 10,
      //       },
      //     },
      //     regions: [],
      //     viewControl: {
      //       "projection": "perspective",
      //       "autoRotate": false,
      //       "autoRotateAfterStill": 3,
      //       "distance": 140.65,
      //       "alpha": 50.433,
      //       "beta": -67.27,
      //       "minAlpha": -200,
      //       "maxAlpha": 200,
      //       "minBeta": -1036800,
      //       "maxBeta": 1036800,
      //       "animation": true,
      //       "animationDurationUpdate": 1000,
      //       "animationEasingUpdate": "cubicInOut",
      //       "orthographicSize": 60,
      //       "autoRotateDirection": "cw",
      //       "autoRotateSpeed": 10,
      //       "damping": 0.8,
      //       "rotateSensitivity": 1,
      //       "zoomSensitivity": 1,
      //       "panSensitivity": 1,
      //       "panMouseButton": "middle",
      //       "rotateMouseButton": "left",
      //       "minDistance": 120.8,
      //       "maxDistance": 160,
      //       "maxOrthographicSize": 400,
      //       "minOrthographicSize": 20,
      //       "center": [
      //         0,
      //         0,
      //         0
      //       ]
      //     },
      //   },
      // }
    },
    // getData() {
    //   // 获取城市名称数据
    //   // console.log("取到的pingtan的json数据", pingtan);
    //   if (pingtan) {
    //     let arr = pingtan.features;
    //     // 循环取出 城市名称和value值
    //     for (var j = 0; j < arr.length; j++) {
    //       this.max = arr[0].id;
    //       this.min = arr[0].id;
    //       if (arr[j].id > this.max) {
    //         this.max = arr[j].id;
    //       }
    //       if (arr[j].id < this.min) {
    //         this.min = arr[j].id;
    //       }
    //       this.listArr.push({
    //         name: arr[j].properties.name,
    //         value: arr[j].id
    //       });
    //     }
    //   }
    // },
    initCharts() {
      // this.chart.showLoading();
      echarts.registerMap("pingtan", pingtan);
      this.chart = echarts.init(document.getElementById("mapChart2"));
      this.chart.setOption(this.options);
    }
  }
};
</script>

<style scoped>
.home {
  display: flex;
  justify-content: space-around;
}

.left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.buttom {
  width: 200px;
  margin: 20px;
}

.item {
  display: flex;
  justify-content: space-between;
  margin-top: 15px;
}

#mapChart2 {
  width: 80vw;
  height: 55vh;
}
</style>
